<style lang="less">
    @import "./login.less";
</style>

<template>
    <div class="login">
        <div class="login-container">
            <Row type="flex" justify="center">
                <Col :xs="22" :sm="16" :md="12" :lg="6">
                    <Card :bordered="false" title="东莞理工学院实验室排课系统">
                        <Tabs size="small" value="accountLoginForm" @on-click="getCurrentTab">
                            <TabPane label="帐号密码登录" name="accountLoginForm">
                                <account-login-form @on-success-valid="handleSubmit" ref="accountLoginForm"></account-login-form>
                            </TabPane>
                            <TabPane label="手机号码登录" name="phoneLoginForm">
                                <phone-login-form @on-success-valid="handleSubmit" ref="phoneLoginForm"></phone-login-form>
                            </TabPane>
                        </Tabs>
                        <Button :disabled="valid" type="info" size="large" @click="loginButton" long>登录</Button>
                        <Divider class="or-divider"> Or </Divider>
                        <div class="other-login-way">
                            <Row type="flex" justify="space-around">
                                <Col span="6">
                                    <div class="text-center">
                                        <Tooltip content="QQ登录">
                                            <a href="oauth2/authorization/qq">
                                                <Icon custom="iconfont icon-qq" size="24" color="#75b9ea"></Icon>
                                            </a>
                                        </Tooltip>
                                    </div>
                                </Col>
                                <Col span="6">
                                    <div class="text-center">
                                        <Tooltip content="微信登录">
                                            <a href="oauth2/authorization/weixin">
                                                <Icon custom="iconfont icon-wechat" size="24" color="#51c332"></Icon>
                                            </a>
                                        </Tooltip>
                                    </div>
                                </Col>
                                <Col span="6">
                                    <div class="text-center">
                                        <Tooltip content="GitHub登录">
                                            <a href="oauth2/authorization/github">
                                                <Icon custom="iconfont icon-github" size="24" color="#f66"></Icon>
                                            </a>
                                        </Tooltip>
                                    </div>
                                </Col>
                                <Col span="6">
                                    <div class="text-center">
                                        <Tooltip content="东莞理工学院中央认证登录">
                                            <a href="oauth2/authorization/dgut">
                                                <img :src="dgutLogo" style="width: 24px;height: 24px;" alt="东莞理工学院logo">
                                            </a>
                                        </Tooltip>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </Card>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import AccountLoginForm from '_c/account-login-form'
import PhoneLoginForm from '_c/phone-login-form'
import { mapActions } from 'vuex'
import dgutLogo from '@/assets/images/logo/dgut-logo.png'
export default {
  // 在实例中使用 components 属性注册需要用到的组件
  components: {
    // 使用 key: value 的形式注册 value 组件，并命名为 key
    'account-login-form': AccountLoginForm,
    'phone-login-form': PhoneLoginForm
  },
  data () {
    return {
      dgutLogo: dgutLogo,
      currentTab: 'accountLoginForm'
    }
  },
  computed: {
    valid () {
      return !this.$store.state.loginValidate.dataValid
      // getters没有loginValidate，且返回结果是一个Object!
      // return this.$store.getters.getDataValid
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    getCurrentTab (name) {
      this.currentTab = name
    },
    handleSubmit ({ userName, password }) {
      this.handleLogin({ userName, password }).then(res => {
        this.getUserInfo().then(res => {
          this.$router.push({
            name: 'home'
          })
        })
      })
    },
    loginButton () {
      this.$refs[this.currentTab].handleSubmit()
    }
  }
}
</script>
